<template>
  <div class="page box">
    <scroll-view  :style="{'height': scrollHeight+'px'}" :scroll-y="true" @scrolltolower="scrolltolower" @scroll="scroll" :scroll-into-view="toView">
      <div class="page__bd page__bd_spacing">
        <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular" @change="swiperChange" @animationfinish="animationfinish">
          <div v-for="item in imgUrls" :key="index">
            <swiper-item>
              <image :src="item" class="slide-image" mode="widthFix" />
            </swiper-item>
          </div>
        </swiper>
      </div>
      <div class="details-box">
        <div class="price-box">
          <i>￥</i>
          <p>{{detail.price}}</p>
          <span>.{{detail.point}}</span>
          <del>￥{{detail.oldPrice}}</del>
        </div>
        <h4>{{detail.title}}</h4>
        <div class="comment-box">
          <div>
            <i><img src="../../../../static/images/icon_reputation.png" alt="" mode="widthFix"></i>
            <div>
              <span>好评率</span>
              <p>
                {{percentage}}%
              </p>
            </div>
            <b>{{detail.commentNum}}条评论</b>
          </div>
        </div>
        <!--库存-->
        <div class="stock-box">
          <p>已售{{detail.sold}}件</p>
          <p>库存{{detail.stock}}件</p>
        </div>
      </div>
      <div class="allContent">
        <div :class="scrollTop>=550?'bar barFixed':'bar'">
          <div :class="currentTab==0?'item active':'item'" @click="scrollTo1(0)">
            图文详解
          </div>
          <div :class="currentTab==1?'item active':'item'" @click="scrollTo1(1)">
            预订须知
          </div>
          <div :class="currentTab==2?'item active':'item'" @click="scrollTo1(2)">
            顾客评论
          </div>
        </div>
        <div class="tabContent">
          <div class="tabs1" id="tabs1">
            <ul>
              <li v-for="(item , index) in graphicItems" :key="index">
                <img :src="item" alt="" mode="widthFix">
              </li>
            </ul>
          </div>
          <div class="tabs2" id="tabs2">
            <div class="title-box">
              <h5>预订须知</h5>
              <div @click="introducesMore = !introducesMore">
                <span v-show="!introducesMore">展开</span>
                <i v-show="!introducesMore"><img src="../../../../static/images/icon-down.png" alt="" mode="widthFix"></i>
                <span v-show="introducesMore">收起</span>
                <i v-show="introducesMore"><img src="../../../../static/images/icon-down.png" class="up" alt="" mode="widthFix"></i>
              </div>
            </div>
            <div class="content-box" :class="{more:introducesMore}">
              <p v-for="(item , index) in introduces" :key="index">{{item}}</p>
            </div>
          </div>
          <div class="tabs3" id="tabs3">
            <div class="title-box">
              <h5>游客评论</h5>
              <div @click="commentMore = !commentMore">
                <span v-show="!commentMore">展开</span>
                <i v-show="!commentMore"><img src="../../../../static/images/icon-down.png" alt="" mode="widthFix"></i>
                <span v-show="commentMore">收起</span>
                <i v-show="commentMore"><img src="../../../../static/images/icon-down.png" class="up" alt="" mode="widthFix"></i>
              </div>
            </div>
            <div class="comment-details">
              <radio-group class="classify" @change="radioChange">
                <label class="classify-label" :class="{'active':isActive==index}" v-for="(item , index) in commentItems" :key="index">
                  <radio v-model="item.name" />
                  <text  @click="isActive = index">{{item.name}}</text>
                </label>
              </radio-group>
              <div class="tourist-reviews">
                <!--游客评论-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </scroll-view>
    <div class="car-box">
      <img src="../../../../static/images/icon-cart.png" alt=""  mode="widthFix">
      <span>{{cartNum}}</span>
    </div>
    <div class="bottom-btn">
      <span>加入购物车</span>
      <b>加入购物车</b>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        indicatorDots: true,
        autoplay: true,
        interval: 5000,
        duration: 900,
        circular: true,
        detail:{
          title:'振兴小镇门票',commentNum : 320,praiseNum:140,
          price:514,oldPrice:777,point:1,stock:654,sold:51
        },
        imgUrls: [
          // 'http://wx.v4.yunyouyuanfang.com/travel_v4//9d16530903a54814b36d0b8df74d3047.jpg',
          'http://wx.v4.yunyouyuanfang.com/travel_v4//9d16530903a54814b36d0b8df74d3047.jpg'
        ],//轮播
        tabs: ["图文详情", "参数规格", "包装售后"],
        activeIndex: 0,
        fontSize: 30,
        scrollHeight:500,
        tabs1Height:0,
        tabs2Height:0,
        tabs3Height:0,
        currentTab:0,
        scrollTop:0,
        toView:"",
        graphicItems:[
          'https://img30.360buyimg.com/sku/jfs/t1/115323/28/2979/324955/5ea56058E30960ee5/f9bc1457dd39aff7.jpg',
          'https://img30.360buyimg.com/sku/jfs/t1/115592/24/3056/254169/5ea56058E17d7e3cc/1844e2b8931f458a.jpg',
          'https://img30.360buyimg.com/sku/jfs/t1/110855/7/5714/296789/5ea56058Eaa2963d5/845f97bd7b28466e.jpg'
        ],// 图文介绍
        introduces:[
          "　长治振兴小镇以“绿”为先，以“文”为魂，以“旅”为径，是一处集山水风光、休闲娱乐、民俗体验、农艺博览、旅游开发、农业观光、生态采摘、产品营销、会务策划、食品加工、餐饮宾馆、精品民宿、健康养生、旅游地产开发于一体的乡村旅游度假胜地。小镇四周群山环绕、翠绿掩映、气候宜人，地处北纬38°线，年平均气温9℃，素有“太行无扇之城、上党天然氧吧”之称。春来“山清水秀、鸟语花香”；夏来“清风凉爽、避暑山庄”；秋来“硕果累累、五谷飘香”；冬来“雪山美景、温泉疗养”，成为太行乡村旅游的新选择。",
        ],
        commentItems:[
          {checked:false,name:'全部评论'},{checked:false,name:'好评'},
          {checked:false,name:'中评'},{checked:false,name:'差评'},{checked:false,name:'还行'},
          {checked:false,name:'好看'},{checked:false,name:'不想再去'},{checked:false,name:'一般'},
        ],//评论
        commentMore:false,//显示评论更多
        isActive:-1,
        introducesMore:false,//显示介绍更多
        noticeMore:false,//显示须知更多
        cartNum:5,//购物车商品数量
      }
    },
    mounted(){
      var that=this;
      wx.getSystemInfo({
        success: function(res) {
          that.scrollHeight=res.windowHeight;
        }
      });
    },
    computed: {
      percentage:function() {
        //好评占比
        return  (this.detail.praiseNum / this.detail.commentNum *100).toFixed(2)
      },
      navbarSliderClass() {
        if (this.activeIndex == 0) {
          return 'weui-navbar__slider_0'
        }
        if (this.activeIndex == 1) {
          return 'weui-navbar__slider_1'
        }
        if (this.activeIndex == 2) {
          return 'weui-navbar__slider_2'
        }
      },
    },
    onLoad(){
      var _this=this;
      var query = wx.createSelectorQuery();
      //选择id
      query.select('.tabs1').boundingClientRect();
      query.exec(function (res) {
        //res就是 所有标签为mjltest的元素的信息 的数组
        // console.log(res[0].height);
        //取高度
        _this.tabs1Height=res[0].height;
      });
      var query1 = wx.createSelectorQuery();
      query1.select('.tabs2').boundingClientRect();
      query1.exec(function (res) {
        //res就是 所有标签为mjltest的元素的信息 的数组
        // console.log(res[0].height);
        //取高度
        _this.tabs2Height=res[0].height;
      });
      var query3 = wx.createSelectorQuery();
      query3.select('.tabs3').boundingClientRect();
      query3.exec(function (res) {
        //res就是 所有标签为mjltest的元素的信息 的数组
        // console.log(res[0].height);
        //取高度
        _this.tabs3Height=res[0].height;
      });
    },
    methods: {
      //选中评论
      radioChange(e){
        console.log(e)
      },
      tabClick(e) {
        // console.log(e);
        this.activeIndex = e.currentTarget.id;
      },
      scrolltolower(){
      },
      scroll(e) {
        var scrollH=e.mp.detail.scrollTop;
        var tabs2H=480+this.tabs1Height;
        var tabs3H=480+this.tabs2Height+this.tabs1Height;
        if(scrollH<tabs2H){
          this.currentTab=0;
        }else if(tabs2H<scrollH<tabs3H){
          this.currentTab=1;
        }
        if(scrollH>tabs3H){
          this.currentTab=2;
        }
        // console.log(scrollH);
        // console.log(tabs3H);
        this.scrollTop=scrollH;
        this.toView="";
      },
      scrollTo1(val){

        var tabs2H=480+this.tabs1Height;
        var tabs3H=480+this.tabs2Height+this.tabs1Height;
        // console.log(val);
        if(val==0){
          this.toView="tabs1";
        }else if(val==1){
          this.toView="tabs2";

        }else{
          this.toView="tabs3";
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../../static/css/details";
  .box {
    padding-bottom: 120rpx;
  }
  .details-box {
    .price-box {
      padding:30rpx 30rpx 0;
      display: flex;
      align-items: flex-end;
      color: $colorRed;
      line-height: 1;
      font-size: 24rpx;
      del {
        color: #999;
        text-decoration:line-through ;
      }
      p{
        font-size: 48rpx;
      }
      span {
        font-size: 32rpx;
      }
    }
  }
  .stock-box {
    display: flex;
    justify-content: space-between;
    padding: 10rpx 30rpx;
    font-size: 24rpx;
    color: #333;
  }
  #tabs1 {
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
  }
  .bottom-btn {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    width: 100%;
    height: 98rpx;
    color: #fff;
    line-height: 98rpx;
    text-align: center;
    span {
      flex: 1;
      background:linear-gradient(90deg,rgba(227,110,45,1) 0%,rgba(229,120,59,1) 100%);
      border-radius:80rpx 0px 0px 0px;
    }
    b {
      flex: 1;
      background:linear-gradient(75deg,rgba(219,89,54,1) 0%,rgba(223,67,41,1) 100%);
      border-radius:0px 80rpx 0px 0px;
    }
  }
  .car-box {
    position: fixed;
    right: 30rpx;
    bottom: 500rpx;
    img {
      width: 110rpx;
    }
    span {
      position: absolute;
      right: 0;
      top: 0;
      min-width:36rpx;
      height:36rpx;
      padding: 0 5rpx;
      background:rgba(215,80,58,1);
      border:1px solid rgba(255,255,255,1);
      border-radius:16rpx;
      font-size: 24rpx;
      color: #fff;
      line-height: 32rpx;
      text-align: center;
      box-sizing: border-box;
    }
  }
</style>
